<template>
  <div>
    <mbx lenev="商品分类" lenev1="分类参数" lenev2="商品列表"></mbx>
    <el-card style="margin-top: 20px">
      <el-button type="primary" @click="addfen">添加分类</el-button>

      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules">
          <el-form-item label="分类名称" label-width="80px" prop="cat_name">
            <el-input v-model="form.cat_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父级分类" label-width="80px">
            <el-cascader
              ref="xiaoshi"
              clearable
              v-model="checkarr"
              :options="options"
              :props="xuanran"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="tianjia">确 定</el-button>
        </div>
      </el-dialog>
      <!-- <el-table :data="goods" style="width: 100%" row-key="cat_id" border>
        <el-table-column type="index" label="#">
          <template slot-scope="scope">{{ scope.row.index }}</template>
        </el-table-column>
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="scope">
               <i
              class="el-icon-success"
              v-if="scope.row.cat_deleted === false"
              style="color: lightgreen"
            >
            </i>
              <i class="el-icon-error" v-else style="color: red"></i>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
             
            <el-tag :type="paixu[scope.row.cat_level]" size="mini">{{
              scope.row.cat_level | spfl
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table> -->

      <tree-table
        :data="goods"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="true"
        style="margin-top: 15px"
      >
        <template slot="isok" slot-scope="scope">
             <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
            style="color: lightgreen"
          >
          </i>
            <i class="el-icon-error" v-else style="color: red"></i>
        </template>

        <template slot="order" slot-scope="scope">
           <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>  <el-tag
            type="success"
            size="mini"
            v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
           <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>

        <template slot="opt" slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="bjfen(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.cat_id)">删除</el-button>
        </template>
      </tree-table>

       <el-dialog title="编辑分类" :visible.sync="dialogFormVisiblebj">
        <el-form :model="formbj" :rules="rules">
          <el-form-item label="分类名称"  label-width="80px" prop="cat_name">
            <el-input v-model="formbj.cat_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisiblebj = false">取 消</el-button>
          <el-button type="primary" @click="bjadd">确 定</el-button>
        </div>
      </el-dialog>

      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="obj.pagenum"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="obj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xuanran:{
         label: "cat_name",
         children: "children",
         value:'cat_id',
         expandTrigger: 'hover',
         checkStrictly:true
      },
      checkarr:[],
      options:[],
      rules:{
       cat_name:[
         {required: true, message: "请输入父类名称", trigger: "blur" }
       ],
         checkarr:[
         {required: true, message: "请输入父类名称", trigger: "blur" }
       ]
      },
      formbj:{
          cat_name: "",
      },
      bjid:'',
      form: {
        cat_pid: "",
        cat_name: "",
        cat_level: "",
      },
      dialogFormVisible: false,
      dialogFormVisiblebj:false,
      // paixu: { 0: "", 1: "success", 2: "warning" },
      goods: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          // 表示将当前列定义为模板列
          type: "template",
          // 表示当前这一列的模板名称
          template: "isok",
        },
        {
          label: "排序",
          // 表示将当前列定义为模板列
          type: "template",
          // 表示当前这一列的模板名称
          template: "order",
        },
        {
          label: "操作",
          // 表示将当前列定义为模板列
          type: "template",
          // 表示当前这一列的模板名称
          template: "opt",
        },
      ],
      obj: {
        pagenum: 1,
        pagesize: 4,
      },
      total: 0,
    };
  },
  created() {
    this.getgood();
  },
  methods: {
    bjfen(row){
      this.dialogFormVisiblebj=true
      this.bjid=row.cat_id
      this.formbj.cat_name=row.cat_name
       console.log(row)
    },
    async bjadd(){
       const res=await this.$API.Bjfen(this.bjid, this.formbj.cat_name)
       console.log(res)
       this.getgood();
      //  this.formbj={}
        this.dialogFormVisiblebj=false
     },
    async del(id){
         const res=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        if(res==='confirm'){
          await this.$API.Del(id)
           this.getgood();
        }
     
    },
    async tianjia(){
      if(this.checkarr.length!==0){
         this.form.cat_pid=this.flid
         this.form.cat_level=this.checkarr.length
      }else{
          this.form.cat_pid=0
         this.form.cat_level=0
      }
       console.log(this.form.cat_pid)
       console.log(this.form.cat_name)
       console.log( this.form.cat_level)
       const res=await this.$API.Tianjia(this.form)
       console.log(res)
       this.getgood();
      this.dialogFormVisible=false
      this.form={}
    },
    handleChange(){
      // console.log( this.$refs.xiaoshi)
        this.$refs.xiaoshi.dropDownVisible=false;
    },
    async addfen(){
      this.dialogFormVisible=true
      const res=await this.$API.Splist('2')
      console.log(res)
      this.options=res
    },
    async getgood() {
      const res = await this.$API.Spfl(this.obj);
      console.log("sp", res);

      res.result.forEach((item, index) => {
        item.index = index + 1;
      });
      this.goods = res.result;
      this.total = res.total;
    },
    handleSizeChange(val) {
      this.obj.pagesize = val;
      this.getgood();
    },
    handleCurrentChange(val) {
      this.obj.pagenum = val;
      this.getgood();
    },
  },
  computed: {
    flid(){
      return this.checkarr[this.checkarr.length-1]
    }
  },

  watch: {
    cart: {
      handler(newValue) {},
      deep: true,

      immediate: true,
    },
  },
};
</script>
<style>
.el-dialog{
  width: 40%;
}
.el-radio__inner{
  display: none;
  background-color:none
}
 .el-radio{
    position: absolute;
    width: 100%;
    margin-left: -20px;
    height: 30px;
}
</style>

<style scoped>
.el-cascader{
  width: 100%;
} 
</style>
